<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        mark{
            background-color: skyblue;
            color: #fff;
        }
    </style>
</head>
<body>
    <!-- meter 表示状态值 -->
    <meter value="50" min="20" low="30" high="70" max="80" optimum="50"></meter><br>
    <!-- progress -->
    <progress value="50" max="100"></progress><br>
    <!-- datalist列表标签 -->
    <input type="text" placeholder="模糊提示" list="student">
    <datalist id="student">张三</option>
        <option value="李四">李四</option>
        <option value="王五">王五</option>
    </datalist><br>
    <!-- details -->
    <details>
        <summary>张三</summary>
        <p>有钱</p>
        <p>家大业大</p>
        <p>分分钟几个亿</p>
        <p>当过兵</p>
    </details><br>
    <div>xxxx</div>


    <p>龙<ruby>傲<rt>ao</rt></ruby>天</p>

    <!-- mark 标记 -->
    <p>一个僵尸<mark>碰到另一个僵尸</mark>然后被吓死了！！</p>


    <script>
        var meterNode = document.querySelector('meter');
        // meterNode.getAttribute('low');
        console.log(meterNode.getAttribute('low'))

    </script>
</body>
</html>